import * as echarts from 'echarts'
import {useEffect, useRef} from "react";

// 1.将echarts功能抽离成组件
// 2.把可变的部分抽象成props参数

const BarCharts = ({ title }) => {
  const charRef = useRef(null)  //使用ref获取dom节点

  useEffect(() => {
    // 保证dom可用 才进行图表渲染
    // 1. 获取渲染图表的dom节点
    //let charDom = document.getElementById('main')
    let charDom = charRef.current   //使用ref获取dom节点

    // 2. 初始化生成图表实例对象
    let myChart = echarts.init(charDom)

    // 3. 图表参数
    let option = {
      title: {
        text: title
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    }

    // 4. 使用图表参数完成渲染
    option && myChart.setOption(option)

  }, []);

  return <div ref={charRef} style={{width: '500px', height: '400px'}}></div>
}

export default BarCharts